<template>
	<div id="app">
		<top></top>
		<div class="main">
			<div class="menu">
				<navList @routerLink="routerLink"></navList>
			</div>
			<div class="content">
				<router-view/>
			</div>
		</div>


	</div>
</template>

<script>
import top from './components/top.vue';
import navList from './components/navList.vue';

export default {
	data() {
		return {}
	},
	components: {top, navList},
	methods: {
		routerLink(item) {
			this.$router.push('/' + item.url);
		}
	}
}
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
}

.main {
  display: flex;

  .menu {
    width: 240px;
    height: calc(100vh - 60px);
    background-color: #F7F3FB;
  }

  .content {
    width: calc(100vw - 240px);
    background-color: red;
    height: calc(100vh - 60px);
    color: #91BEF0;
  }
}
</style>
